import React from 'react';
import { Tooltip } from '@arco-design/web-react';
import { User } from '@/api/interface/authentication';
import Edit from '@/assets/edit.svg';

export function getColumns(t: unknown, callback: (record: User) => void) {
  const columns = [
    {
      title: '#',
      dataIndex: 'id',
    },
    {
      title: t['auth.columns.username'],
      dataIndex: 'name',
    },
    {
      title: t['auth.columns.roles'],
      dataIndex: 'roles',
      render: (_, record: User) => (
        <>
          {record.roles?.length
            ? record.roles?.map((item) => item.name).join(' , ')
            : '--'}
        </>
      ),
    },
    {
      title: t['auth.columns.action'],
      dataIndex: 'action',
      render: (_, record: User) => (
        <Tooltip position="bottom" content={t['auth.operations.edit.role']}>
          <Edit
            style={{
              width: 20,
              cursor: 'pointer',
              fill: 'var(--color-text-2)',
            }}
            onClick={() => callback(record)}
          />
        </Tooltip>
      ),
    },
  ];
  return columns;
}
